<style scoped="scoped" lang="scss">
	.box{ max-width:1200px; margin:50px auto; padding:12px;
		.editorbox{ height:500px; margin-top:20px;}
	}
</style>
<template>
	<div class="box">
	<h3>VUE简易富文本编辑器 <span style="color:#55A532">作者：神夜 QQ:564379992</span></h3>
  <div class="editorbox">
    <sy-editor v-on:getContent="getContent" :content="content"></sy-editor>		
  </div>
	</div>
</template>

<script>
	import SyEditor from '@/components/syEditor.vue'
	export default{
		components:{SyEditor},
		data(){
			return{
				content:'<div><b><font size="5" color="#f93147">《虞美人·听雨》</font></b></div><div><br></div><div><u><font color="#0c9671">【宋】蒋捷</font></u></div><div><br></div><div>少年听雨歌楼上。红烛昏罗帐。</div><div><br></div><div><font size="4" color="#d213ef"><u>壮年听雨客舟中。</u></font></div><div><br></div><div>江<b><font size="5">阔云</font></b>低、断雁叫西风。</div><div><b><font color="#f93147"><br></font></b></div><div><b><font color="#f93147">而今听雨僧庐下。</font></b></div><div><br></div><div>鬓已星星也。悲欢离合总无情。</div><div><br></div><div><font size="3" color="#7f4a47">一任阶前、点滴到</font><font size="4" color="#10e1a3"><b><u>天明</u></b></font><font size="3" color="#7f4a47">。</font></div><div><br></div><div><b style="color: rgb(249, 151, 76);">这首词以“听雨”为媒介，概括出少年</b><font color="#f93147" size="4">、<b>壮年和晚年的特殊感受，将几十年大跨度的时间和空间相融合</b></font><b style="color: rgb(249, 151, 76);">：少年只知追欢逐笑享受陶醉；壮年飘泊孤苦触景伤怀；老年的寂寞孤独，一生悲欢离合，尽在雨声中体现。此词在结构上运用时空跳跃，以“听雨”复沓串连，上、下片浑然一体，具有跌宕回旋的匠心。</b></div><div><font color="#bfbfbf"><br></font></div><div><font size="2"><b><font color="#81778e">这首词以“听雨”为媒介，概括出少年、壮年和晚年的特殊感受，将几十年大跨度的时间和空间相融合：</font><i><font color="#e2534d">少年只知追欢逐笑享受陶醉；壮年飘泊孤苦触景伤怀</font></i><font color="#81778e">；老年的寂寞孤独，一生悲欢离合，尽在雨声中体现。此词在结构上运用时空跳跃，以“听雨”复沓串连，上、下片浑然一体，具有跌宕回旋的匠心。</font></b></font></div><div><br></div><div>.......&nbsp;</div>'
			}
		},
		methods:{
			getContent(html){
				console.log(html);
			}			
		}
	}
</script>
